/*
 * @Author: wangjq4214
 * @Date: 2022-05-06 20:39:38
 * @LastEditTime: 2022-05-06 23:08:07
 * @LastEditors: wangjq4214
 */
import { ReactNode } from 'react';
import {
  Card,
  Typography,
  Divider,
  Grid,
  Skeleton,
} from '@arco-design/web-react';
import { IconCalendar } from '@arco-design/web-react/icon';
import { overviewDataAtom } from '../model';

const { Row, Col } = Grid;

type StatisticItemType = {
  icon?: ReactNode;
  title?: ReactNode;
  count?: ReactNode;
  loading?: boolean;
  unit?: ReactNode;
};

function StatisticItem(props: StatisticItemType) {
  const { icon, title, count, loading, unit } = props;

  return (
    <div className="flex items-center pl-20px text-$color-text-1">
      <div className="flex items-center justify-center w-54px h-54px bg-$color-fill-2 mr-12px rounded-1/2 text-24px">
        {icon}
      </div>
      <div>
        <Skeleton loading={loading} text={{ rows: 2, width: 60 }} animation>
          <div className="text-14px text-$color-text-1 leading-relaxed">
            {title}
          </div>
          <div className="text-22px font-600 text-$color-text-1">
            {count}
            <span className="text-12px font-400 color-$color-text-2 ml-8px">
              {unit}
            </span>
          </div>
        </Skeleton>
      </div>
    </div>
  );
}

const Overview = () => {
  const overviewData = useAtomValue(overviewDataAtom);

  return (
    <Card>
      <Typography.Title heading={5}>欢迎回来，管理员</Typography.Title>
      <Divider />

      <Row>
        <Col flex={1}>
          <StatisticItem
            icon={<IconCalendar />}
            title="存储集群总数"
            count={overviewData.total}
            loading={false}
            unit="个"
          />
        </Col>

        <Divider type="vertical" className="h-60px" />

        <Col flex={1}>
          <StatisticItem
            icon={<IconCalendar />}
            title="今日创建存储集群数目"
            count={overviewData.today}
            loading={false}
            unit="个"
          />
        </Col>

        <Divider type="vertical" className="h-60px" />

        <Col flex={1}>
          <StatisticItem
            icon={<IconCalendar />}
            title="节点数目"
            count={overviewData.node}
            loading={false}
            unit="个"
          />
        </Col>
      </Row>

      <Divider />

      <div>
        <div className="flex justify-between mb-16px">
          <Typography.Paragraph
            className="text-16px font-500"
            style={{ marginBottom: 0 }}
          >
            集群数目变化情况
            <span className="text-12px font-400 ml-4px text-$color-text-3">
              (近一周)
            </span>
          </Typography.Paragraph>
        </div>
      </div>
    </Card>
  );
};

export default Overview;
